<template>
  <div class="login-container web">
    <el-card class="login-card">
      <template #header>
        <div class="card-header">
          <span>欢迎登录 - 个性化教育系统</span>
        </div>
      </template>
      <el-form :model="form" label-width="80px" @submit.prevent="handleLogin">
        <el-form-item label="用户名">
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            show-password
            type="password"
          />
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" native-type="submit" type="primary">登录</el-button>
          <el-button @click="goToRegister">去注册</el-button>
        </el-form-item>
        <div class="forgot-link">
          <a @click="goToResetPage">忘记用户名或密码？</a>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { useLogin } from '@/composables/useLogin'

const { form, loading, handleLogin, goToRegister, goToResetPage } = useLogin()
</script>

<style scoped>
.login-container.web {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
}

.login-card {
  width: 450px;
}

.card-header {
  text-align: center;
  font-size: 20px;
}

.forgot-link {
  text-align: right;
  margin-top: -10px;
}

.forgot-link a {
  font-size: 13px;
  color: #409eff;
  cursor: pointer;
}
</style>
